<template>
  <aside
    class="sidebar"
    :class="{ shadow: isMobile }"
    :style="{
      width: isMobile ? '100%' : '50px',
      bottom: isMobile ? '' : '0',
      height: isMobile ? '50px' : '100%',
    }"
  >
    <ul class="inner" :class="{ 'inner-mobile': isMobile }">
      <li class="link-item" :class="{ 'link-item-mobile': isMobile }">
        <router-link :to="{
          path: `/?projectId=${projectId}`
        }" class="link-target">
          <el-tooltip effect="dark" content="主页" placement="right">
            <i
              class="fa el-icon-s-home icon"
              :style="{
                'margin-left': !isMobile && lightHeight === 0 ? '26px' : '',
                'margin-bottom': isMobile && lightHeight === 0 ? '14px' : ''
              }"
            ></i>
          </el-tooltip>
        </router-link>
      </li>

      <li
        class="link-item"
        v-if="!isProjectPage"
        :class="{ 'link-item-mobile': isMobile }"
      >
        <router-link :to="{
          path: `/overall?projectId=${projectId}`
        }"  class="link-target">
          <el-tooltip effect="dark" content="整体进展" placement="right">
            <i
              class="fa fa-line-chart icon"
              :style="{ 'margin-left': lightHeight === 1 ? '26px' : '',  'margin-bottom': isMobile && lightHeight === 1 ? '14px' : '' }"
            ></i>
          </el-tooltip>
        </router-link>
      </li>
      <li
        class="link-item"
        v-if="!isProjectPage"
        :class="{ 'link-item-mobile': isMobile }"
      >
        <router-link  :to="{
          path: `/workProgress?projectId=${projectId}`
        }" class="link-target">
          <el-tooltip effect="dark" content="施工进展" placement="right">
            <i
              class="fa fa-book icon"
              :style="{ 'margin-left': lightHeight === 2 ? '26px' : '',  'margin-bottom': isMobile && lightHeight === 2 ? '14px' : '' }"
            ></i>
          </el-tooltip>
        </router-link>
      </li>
      <li
        class="link-item"
        v-if="!isProjectPage"
        :class="{ 'link-item-mobile': isMobile }"
      >
        <router-link  :to="{
          path: `/designProgress?projectId=${projectId}`
        }" class="link-target">
          <el-tooltip effect="dark" content="设计进展" placement="right">
            <i
              class="fa fa-tags icon"
              :style="{ 'margin-left': lightHeight === 3 ? '26px' : '',  'margin-bottom': isMobile && lightHeight === 3 ? '14px' : '' }"
            ></i>
          </el-tooltip>
        </router-link>
      </li>
      <li
        class="link-item"
        v-if="!isProjectPage"
        :class="{ 'link-item-mobile': isMobile }"
      >
        <router-link :to="{
          path: `/purchasingProgress?projectId=${projectId}`
        }" class="link-target">
          <el-tooltip effect="dark" content="采购进展" placement="right">
            <i
              class="fa fa-object-ungroup icon"
              :style="{ 'margin-left': lightHeight === 4 ? '26px' : '',  'margin-bottom': isMobile && lightHeight === 4 ? '14px' : '' }"
            ></i>
          </el-tooltip>
        </router-link>
      </li>
      <li
        class="link-item"
        v-if="!isProjectPage"
        :class="{ 'link-item-mobile': isMobile }"
      >
        <router-link  :to="{
          path: `/qhse?projectId=${projectId}`
        }" class="link-target">
          <el-tooltip effect="dark" content="QHSE管理" placement="right">
            <i
              class="fa fa-pencil icon"
              :style="{ 'margin-left': lightHeight === 5 ? '26px' : '',  'margin-bottom': isMobile && lightHeight === 5 ? '14px' : '' }"
            ></i>
          </el-tooltip>
        </router-link>
      </li>
      <li
        style="position: fixed; right: 40px; top: 20px"
        class="link-item"
        v-if="!isMobile"
        :class="{ 'link-item-mobile': isMobile }"
      >
        <a class="link-target">
          <i
            @click="clickFullscreen"
            class="fa icon"
            :class="{
              selected: lightHeight === 5,
              'arrows-alt': !isFullscreen,
              'compress': isFullscreen,
            }"
          ></i>
        </a>
      </li>
    </ul>
  </aside>
</template>
<script>
import screenfull from 'screenfull'
export default {
  props: {
    isMobile: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    lightHeight: {
      type: Number,
      default: () => {
        return 0
      }
    },
    detail: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      isFullscreen: false,
      isProjectPage: false,
      projectId: '',
      isOut: false
    }
  },
  methods: {
    outWindow () {
      window.open(`${window.location.href}&isOut=true`, '_blank', 'width=' + (window.screen.availWidth - 10) + ',height=' + (window.screen.availHeight - 30) + ',top=0,left=0,toolbar=yes,menubar=yes,scrollbars=no,resizable=no,location=no,status=no')
    },
    doCopy: function () {
      this.$copyText(window.location.href).then(function (e) {
        alert('您的浏览器不支持全屏模式，已经将链接复制到剪切板，请黏贴到浏览器')
      }, function (e) {})
    },

    clickFullscreen () {
      if (!this.isOut) {
        return this.outWindow()
      }
      if (!screenfull.isEnabled) {
        this.doCopy()
        return false
      }
      this.isFullscreen = !screenfull.isFullscreen
      screenfull.toggle()
    }
  },
  watch: {
    $route (to, from) {
      this.projectId = this.$route.query.projectId
    }
  },
  async mounted () {
    this.isOut = this.$route.query.isOut
    this.projectId = this.$route.query.projectId
    this.isFullscreen = screenfull.isFullscreen
    this.isProjectPage = location.hash.includes('project')
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-icon-s-home {
  color: #01b2f6 !important;
  font-size: 18px;
}
.fa-line-chart {
  background: url("./2.png") center center no-repeat;
  &:before {
    content: "" !important;
  }
}
.fa-tags {
  background: url("./4.png") center center no-repeat;
  &:before {
    content: "" !important;
  }
}
.fa-object-ungroup {
  background: url("./5.png") center center no-repeat;
  &:before {
    content: "" !important;
  }
}
.fa-book {
  background: url("./3.png") center center no-repeat;
  background-size: 12px;
  &:before {
    content: "" !important;
  }
}

.fa-pencil {
  background: url("./6.png") center center no-repeat;
  &:before {
    content: "" !important;
  }
}

.shadow {
  -webkit-box-shadow: 0px 0px 10px 0 rgba(197, 192, 192, 1);
  -moz-box-shadow: 0px 0px 10px 0 rgba(197, 192, 192, 1);
  box-shadow: 0px 0px 10px 0 rgba(197, 192, 192, 1);
}
.sidebar {
  z-index: 1;
  background-color: transparent;
  position: absolute;
  left: 0;
  top: 0;
  .inner {
    height: 100%;
    width: 100%;
  }

  .link-item {
    height: 50px;
    display: flex;
    .link-target {
      display: flex;
      flex: 1;
      align-items: end;
      .icon {
        font-size: 18px;
        display: block;
        width: 16px;
        height: 16px;
        margin: 0 auto;
      }
      .text {
        display: none;
      }
    }
    .router-link-exact-active {
      background-color: transparent;
    }
  }
  .link-target {
    display: flex;
    flex: 1;
    align-items: center;
  }
  .link-icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 15px;
  }
  .inner-mobile {
    display: flex;
  }
  .link-item-mobile {
    flex: 1;
  }
  .inner-pc {
    li {
      position: relative;
      &:hover {
        .text {
          position: absolute;
          right: -90px;
          width: 80px;
          text-align: left;
          line-height: 40px;
          display: block !important ;
        }
      }
    }
  }
}
.arrows-alt {
  width:20px !important;
  height:20px !important;
  cursor: pointer;
  background: url("./arrows-alt.png") center center no-repeat;
  background-size: 20px 20px;
  &:before {
    content: "" !important;
  }
}

.compress {
  width:20px !important;
  height:20px !important;
  cursor: pointer;
  background: url("./compress.png") center center no-repeat;
  background-size: 20px 20px !important;
  &:before {
    content: "" !important;
  }
}
</style>
